<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar :title="`${comment.reply_count}条回复`">
      <van-icon slot="left" name="cross" @click="$emit('click-close')" />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 当前评论项 -->
    <CommentItem :cmt="comment" />
    <!-- /当前评论项 -->

    <van-cell title="所有回复" />

    <!-- 评论的回复列表 -->
    <CommentList type="c" :list="cmtList" :aid="comment.com_id" />
    <!-- /评论的回复列表 -->

    <!-- 底部 -->
    <div class="article-bottom">
      <!-- 发表回复 按钮 -->
      <van-button
        @click="isShowPost = true"
        class="comment-btn"
        type="default"
        round
        size="small"
      >
        发表回复
      </van-button>
    </div>
    <!-- /底部 -->

    <!-- 回复评论 弹层 -->
    <van-popup
      v-model="isShowPost"
      position="bottom"
      :style="{ height: '18%' }"
    >
      <!-- 发表评论组件：对评论发回复 -->
      <CmtAdd @onClose="addOk" :target="comment.com_id" :art_id="articleId" />
    </van-popup>
  </div>
</template>

<script>
// 导入 子组件（评论项组件）
import CommentItem from './CommentItem.vue'
// 导入 子组件（评论列表组件）
import CommentList from './CommentList.vue'
// 导入 子组件（发表评论组件）
import CmtAdd from './CmtAdd.vue'

export default {
  name: 'CommentReply', // 评论回复列表 组件
  components: { CommentItem, CommentList, CmtAdd },
  // 从 祖辈组件获取 注入的 文章id
  inject: {
    // 文章id
    articleId: {
      type: [Number, String],
      default: null
    }
  },
  props: {
    // 评论数据对象
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 评论的回复数组
      cmtList: [],
      // 控制 发表回复 弹出层
      isShowPost: false
    }
  },
  methods: {
    // 1.完成新增评论的回复后执行的代码--------
    addOk(newData) {
      // 将新增成功的完整回复数据，添加到 回复数组中
      this.cmtList.unshift(newData)
      // 关闭 新增弹层
      this.isShowPost = false
    }
  },
  computed: {},
  watch: {},
  created() {
    console.log(this.comment)
  },
  mounted() {}
}
</script>

<style scoped lang="less">
.replyContainer {
  padding-top: 80px;
}
.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 88px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 282px;
    height: 46px;
    border: 2px solid #eeeeee;
    font-size: 30px;
    line-height: 46px;
    color: #a7a7a7;
  }
}
</style>
